<template>
    <div style="padding-left: 17px;">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-s-custom"></i> 人员管理
                </el-breadcrumb-item>
                <el-breadcrumb-item>人员添加</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form
                :model="ruleForm"
                status-icon
                :rules="rules"
                ref="ruleForm"
                label-width="80px"
                class="demo-ruleForm"
            >
                <el-form-item label="账号" prop="age" style="width:350px">
                    <el-input v-model.number="ruleForm.age"></el-input>
                </el-form-item>
                <el-form-item label="昵称" prop="name" style="width:350px">
                    <el-input v-model.number="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pass" style="width:350px">
                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass" style="width:350px">
                    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属机构">
                    <el-select v-model="ruleForm.inst" placeholder="请选择">
                        <el-option
                            v-for="item in inst"
                            :key="item.id"
                            :label="item.title"
                            :value="item.title"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色">
                    <el-select v-model="ruleForm.role" placeholder="请选择">
                        <el-option
                            v-for="item in role"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import Qs from 'qs';
export default {
    name: 'baseform',
    data() {
        var checkAge = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('账号不能为空'));
            }
            setTimeout(() => {
                if (!/^[0-9a-zA-Z]*$/g.test(value)) {
                    callback(new Error('请输入数字或字母'));
                } else {
                    // console.log(value.toString().length);
                    if (value.toString().length <= 11 && value.toString().length >= 5) {
                        callback();
                    } else {
                        callback(new Error('请输入5~11位数'));
                    }
                }
            }, 1000);
        };
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            }
            setTimeout(() => {
                if (value.toString().length <= 18 && value.toString().length >= 6) {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                } else {
                    callback(new Error('请输入6~18位数'));
                }
            }, 1000);
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            //值
            ruleForm: {
                age: '', //账号
                name: '', //昵称
                pass: '', //密码
                checkPass: '', //确认密码
                inst: '', //所属机构
                role: '' //角色
            },
            //表单验证规则
            rules: {
                pass: [{ validator: validatePass, trigger: 'blur' }],
                checkPass: [{ validator: validatePass2, trigger: 'blur' }],
                age: [{ validator: checkAge, trigger: 'blur' }]
            },
            //所属机构
            inst: [],
            //角色
            role: []
        };
    },
    created() {
        this.$http
            .post(
                '/api/api/user/roleinfo',
                {
                    name: $cookies.get('tokenuser'),
                    form: $cookies.get('tokenform'),
                    token: $cookies.get('tokenpa').token
                },
                { emulateJSON: true } //解析对象数组
            )
            .then(obtain => {
                if (obtain.body.code == 200) {
                    this.inst = obtain.body.data.inst; //获取到的机构列表
                    this.role = obtain.body.data.role; //获取到的角色列表
                } else {
                    this.$cookies.remove('tokenpa'); //删除账号
                    this.$cookies.remove('tokenpower'); //删除用户身份
                    this.$cookies.remove('tokenform'); //删除登录令牌
                    this.$cookies.remove('tokenuser'); //删除账号
                    this.$message.error({
                        message: obtain.body.msg,
                        duration: 1000,
                        onClose: function() {
                            window.location = './login';
                        }
                    });
                }
            })
            .catch(fail => {
                this.$message.error({
                    message: '服务器请求失败...'
                });
            });
        /*  this.$http
            .post(
                '/api/api/user/roleinfo',
                Qs.stringify({
                    name: $cookies.get('tokenuser'), //用户账号
                    form: $cookies.get('tokenform'), //用户身份（0公司 1机构 2客服）
                    token: $cookies.get('tokenpa').token //当前登录令牌
                }),
                { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
            )
            .then(obtain => {
                if (obtain.body.code == 200) {
                    this.inst = obtain.body.data.inst; //获取到的机构列表
                    this.role = obtain.body.data.role; //获取到的角色列表
                } else {
                    this.$cookies.remove('tokenpa'); //删除账号
                    this.$cookies.remove('tokenpower'); //删除用户身份
                    this.$cookies.remove('tokenform'); //删除登录令牌
                    this.$cookies.remove('tokenuser'); //删除账号
                    this.$message.error({
                        message: obtain.body.msg,
                        duration: 1000,
                        onClose: function() {
                            window.location = './login';
                        }
                    });
                }
            })
            .catch(fail => {
                this.$message.error({
                    message: '服务器请求失败...'
                });
            }); */
    },
    methods: {
        //提交
        submitForm(formName) {
            if (this.ruleForm.pass.length <= 18 && this.ruleForm.pass.length >= 6) {
                this.$http
                    .post(
                        '/api/api/user/useradd',
                        Qs.stringify({
                            name: $cookies.get('tokenuser'), //用户账号
                            form: $cookies.get('tokenform'), //用户身份（0公司 1机构 2客服）
                            token: $cookies.get('tokenpa').token, //当前登录令牌
                            power: $cookies.get('tokenpower'), //用户权限
                            username: this.ruleForm.age, //待添加账号
                            usertitle: this.ruleForm.name, //待添加昵称
                            userpass1: this.ruleForm.pass, //待添加密码1
                            userpass2: this.ruleForm.checkPass, //待添加密码2
                            userform: this.ruleForm.inst, //待添加机构
                            userrole: this.ruleForm.role //待添加角色
                        }),
                        { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
                    )
                    .then(obtain => {
                        if (obtain.body.code == 200) {
                            this.$message.success(obtain.body.msg);
                            this.$refs[formName].resetFields();
                        } else {
                            this.$message.error(obtain.body.msg);
                        }
                    })
                    .catch(fail => {
                        this.$message.error({
                            message: '服务器请求失败...'
                        });
                    });
            } else {
                this.$message.error('请输入6~18位数密码');
            }
        }, //重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
};
</script>
<style  scoped>
</style>